<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录与登出</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }
        .login-form, .logout-form {
            display: none;
        }
        .active {
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="login-form active" id="loginForm">
        <h2>登录</h2>
        <input type="text" id="username" placeholder="用户名" required>
        <input type="password" id="password" placeholder="密码" required>
        <button onclick="login()">登录</button>
    </div>
    <div class="logout-form" id="logoutForm">
        <h2>单点登陆对接测试,欢迎，<span id="welcomeUser"></span></h2>
        <button onclick="logout()">登出</button>
    </div>
</div>

<script>
    // 检查 localStorage 中是否有登录信息
    window.onload = function() {
        let username = localStorage.getItem('username');
        let geturl = window.location.href
        let getqyinfo = geturl.split('?')[1]
        console.log(getqyinfo)
        if (getqyinfo === undefined || getqyinfo.trim() === '') {
            if (username) {
                document.getElementById('loginForm').classList.remove('active');
                document.getElementById('logoutForm').classList.add('active');
                document.getElementById('welcomeUser').innerText = username;
            }
        }else{
            let getqys = getqyinfo.split('&')
            if (getqys === undefined || getqys.length<=0) {
                console.log(getqys)
                return;
            }
            let obj = {}  //创建空对象，接收截取的参数
            for(let i = 0;i < getqys.length;i++ ){
                console.log(i)
                let item = getqys[i].split('=')
                let key = item[0]
                let value = item[1]
                obj[key] = value
            }
            console.log(obj)
            username = obj["loginName"];
            localStorage.setItem('token', obj["token"]);
            localStorage.setItem('username', obj["loginName"]);
            if (username) {
                document.getElementById('loginForm').classList.remove('active');
                document.getElementById('logoutForm').classList.add('active');
                document.getElementById('welcomeUser').innerText = username;
            }else{
                localStorage.clear();
                window.parent.location.href="http://221.6.214.20:808/login";
            }
        }
    };

    function login() {
        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;

        if (username && password) {
            // 存储用户名到 localStorage
            localStorage.setItem('username', username);

            document.getElementById('loginForm').classList.remove('active');
            document.getElementById('logoutForm').classList.add('active');
            document.getElementById('welcomeUser').innerText = username;
        } else {
            alert('请输入用户名和密码');
        }
    }

    function logout() {
        var token = localStorage.getItem('token');
        var myHeaders = new Headers();

        var requestOptions = {
            method: 'GET',
            headers: myHeaders,
            redirect: 'follow'
        };
        fetch("/hanyun/logoutOss?token="+token, requestOptions)
            .then(response => {
                // 从 localStorage 中移除用户名
                localStorage.removeItem('username');
                localStorage.removeItem('token');
                localStorage.clear();
                window.parent.location.href="http://221.6.214.20:808/login";
            })
            .then(result => console.log(result))
            .catch(error => console.log('error', error));
    }
</script>
</body>
</html>
